<template>
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
		<view class="popup-title">
			<uni-icons type="closeempty" size="24" color="#666" @click="cancle"></uni-icons>
			<span>请选择分类</span>
			<uni-icons type="checkmarkempty" size="24" color="#666" @click="confirm"></uni-icons>
		</view>
		<view class="popup-content popup-height">
			<DaTreeVue2
				ref="daTree"
				expandChecked
				:data="treeData"
				labelField="category"
				valueField="id"
				:defaultCheckedKeys="defaultCheckedKeys"
				@change="handleTreeChange"
				@expand="handleExpandChange" />
		</view>
	</uni-popup>
</template>

<script>
	import DaTreeVue2 from '@/components/da-tree-vue2/index.vue'
	export default {
		components: { DaTreeVue2 },
		props: {
			treeData: {
				type: Array,
				default: function() {
					return []
				}
			} 
		},
		data() {
			return {
				allSelectedKeys: undefined,
				currentItem: '',
				defaultCheckedKeys: ''
			}
		},
		methods: {
			handleTreeChange(allSelectedKeys, currentItem) {
				// console.log('111111111111111111111111111111')
				// console.log(allSelectedKeys)
				// console.log(currentItem)
				this.allSelectedKeys = allSelectedKeys
				this.currentItem = currentItem
			},
			handleExpandChange(node) {
			},
			cancle() {
				this.close()
			},
			confirm() {
				let daTree = this.$refs.daTree.getCheckedNodes()
				// this.$emit('change', this.currentItem)
				this.$emit('change', daTree[0] || {})
				this.close()
			},
			open(value) {
				console.log(value)
				this.$refs.popup.open() 
				this.$nextTick(() => {
					this.defaultCheckedKeys = value
				})
			},
			close() {
				this.$refs.popup.close() 
			}
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	@mixin height {
		/* #ifndef APP-NVUE */
		height: calc(100vh - 368rpx);
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}
	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
	}
	.popup-title{
		@include flex;
		padding: 28rpx 24rpx;
		text-align: center;
		color: #666;
		justify-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		border-bottom: 2rpx solid #ececec;
	}
</style>